<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>餐厅扫码点餐系统 - SmartOrder</title>
    <!-- 引入Element-UI样式 -->
    <link rel="stylesheet" href="/css/element-ui.css">
    <!-- 自定义CSS -->
    <style>
        body {
            font-family: 'Avenir, Helvetica, Arial, sans-serif';
            color: #2c3e50;
        }

        .container {
            display: flex;
            padding: 20px;
            width: 70%;
            margin: 0 auto;
        }

        .category-list {
            width: 30%;
        }

        .category-item {
            background-color: #f2f6fc;
            color: #606266;
            border-right: 1px solid #e4e7ed;
            padding: 0 36px;
            line-height: 64px;
            font-size: 24px;
            cursor: pointer;
        }

        .category-item.active {
            background-color: #fff;
            color: #2c3e50;
            border: 1px solid #e4e7ed;
            border-right: none;
        }

        .dish-list {
            width: 70%;
            padding-left: 20px;
        }

        .dish-item {
            display: flex;
            align-items: center;
            padding: 10px 36px;
            line-height: 64px;
            font-size: 24px;
            border-bottom: 1px solid #e4e7ed;
        }

        .dish-item img {
            width: 100px;
            height: 100px;
            margin-right: 20px;
            border-radius: 5px;
        }

        .dish-item .dish-info {
            display: flex;
            align-items: center;
            flex-grow: 1;
        }

        .dish-item .dish-name {
            margin-right: 10px;
        }

        .dish-item .price {
            margin-left: auto;
            margin-right: 20px;
        }

        .dish-item .el-button {
            margin-left: 10px;
        }

        .footer {
            margin-top: 20px;
            background-color: #f56c6c;
            color: white;
            font-size: 18px;
            line-height: 54px;
            text-align: center;
        }

        .fixed-area {
            position: fixed;
            right: 50px;
            bottom: 80px;
            width: 60px;
        }

        .fixed-area a {
            display: block;
            width: 60px;
            height: 60px;
            background-color: #f2f6fc;
            color: #606266;
            font-size: 36px;
            text-align: center;
            line-height: 60px;
            text-decoration: none;
        }

        .fixed-area a:hover {
            color: #409eff;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="app">
    <h1 style="text-align: center;">欢迎光临，当前是【{{ tableId }}桌】，请点餐</h1>
    <div class="container">
        <div class="category-list">
            <div v-for="category in categories" :key="category.id"
                 :class="['category-item', { active: activeCategoryId === category.id }]"
                 @click="selectCategory(category.id)">
                {{ category.name }}
            </div>
        </div>
        <div class="dish-list">
            <div v-for="dish in dishes" :key="dish.id" class="dish-item">
                <img :src="dish.image" alt="菜品图片">
                <div class="dish-info">
                    <span class="dish-name">{{ dish.name }}</span>
                    <span class="price">￥{{ dish.price }}</span>
                    <el-button type="primary" size="mini" icon="el-icon-plus" circle @click="addToCart(dish)"></el-button>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        当前页面由AI自动生成，可能需要进一步优化或调整。
    </div>
    <div class="fixed-area">
        <a href="/" class="el-icon-house"></a>
        <a href="###" @click="showOrderDialog = true" class="el-icon-goods">
            <span style="position: absolute; top: 65px; right: 5px; font-size: 18px; line-height: normal; font-weight: bold; color: red;">
                {{ orders.length }}
            </span>
        </a>
    </div>

    <!-- 新增：订单详情对话框 -->
    <el-dialog
            title="订单详情"
            :visible.sync="showOrderDialog"
            width="50%">
        <el-table :data="orders" style="font-size: 18px;">
            <el-table-column prop="dishName" label="菜品"></el-table-column>
            <el-table-column prop="dishPrice" label="单价" align="center">
                <template slot-scope="scope">
                    {{ scope.row.dishPrice.toFixed(2) }}
                </template>
            </el-table-column>
            <el-table-column prop="dishQuantity" label="数量" align="center"></el-table-column>
            <el-table-column label="合计" align="right">
                <template slot-scope="scope">
                    {{ (scope.row.dishPrice * scope.row.dishQuantity).toFixed(2) }} 元
                </template>
            </el-table-column>
        </el-table>
        <div style="margin: 20px 0; text-align: right; font-size: 18px;">
            订单总价：<span style="color: red; font-weight: bold;">{{ calculateTotalPrice().toFixed(2) }}</span> 元
        </div>
    </el-dialog>
</div>

<!-- 引入Vue.js -->
<script src="/js/vue.js"></script>
<!-- 引入Element-UI -->
<script src="/js/element-ui.js"></script>
<!-- 引入AXIOS -->
<script src="/js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableId: '',
                categories: [],
                dishes: [],
                activeCategoryId: null,
                orders: [], // 新增：订单列表
                showOrderDialog: false // 新增：控制订单详情对话框的显示
            };
        },
        created() {
            this.getTableId();
            this.fetchCategories();
            this.queryOrderList();
        },
        methods: {
            getTableId() {
                const urlParams = new URLSearchParams(window.location.search);
                const tableId = urlParams.get('tableId');
                if (!tableId || isNaN(tableId)) {
                    this.$alert('桌号无效，请重新扫码', '错误', {
                        confirmButtonText: '确定',
                        callback: () => {
                            window.location.href = '/';
                        }
                    });
                } else {
                    this.tableId = tableId;
                }
            },
            fetchCategories() {
                axios.get('/api/categories')
                    .then(response => {
                        this.categories = response.data;
                        if (this.categories.length > 0) {
                            this.selectCategory(this.categories[0].id);
                        }
                    })
                    .catch(error => {
                        console.error('获取菜品类别列表失败:', error);
                    });
            },
            selectCategory(categoryId) {
                this.activeCategoryId = categoryId;
                this.fetchDishes(categoryId);
            },
            fetchDishes(categoryId) {
                axios.get(`/api/dishes?categoryId=${categoryId}`)
                    .then(response => {
                        this.dishes = response.data;
                    })
                    .catch(error => {
                        console.error('获取菜品列表失败:', error);
                    });
            },
            addToCart(dish) {
                console.log('添加菜品到购物车:', dish);
                axios.post(`/api/orderInfo/orderDish?tableId=${this.tableId}&dishId=${dish.id}`)
                    .then(response => {
                        if (response.data === 1) {
                            this.$notify({
                                title: '成功',
                                message: '添加菜品成功',
                                type: 'success'
                            });
                            // 添加成功后调用获取订单列表的函数
                            this.queryOrderList();
                        } else if (response.data === 0) {
                            this.$notify({
                                title: '错误',
                                message: '菜品数据不存在',
                                type: 'error'
                            });
                        }
                    })
                    .catch(error => {
                        console.error('添加菜品失败:', error);
                        this.$notify({
                            title: '错误',
                            message: '添加菜品失败',
                            type: 'error'
                        });
                    });
            },

            // 新增：显示订单列表的函数
            queryOrderList() {
                axios.get(`/api/orderInfo/listByTableId?tableId=${this.tableId}`)
                    .then(response => {
                        this.orders = response.data;
                    })
                    .catch(error => {
                        console.error('获取订单列表失败:', error);
                        this.$notify({
                            title: '错误',
                            message: '获取订单列表失败',
                            type: 'error'
                        });
                    });
            },

            // 新增：计算订单总价
            calculateTotalPrice() {
                return this.orders.reduce((total, order) => {
                    return total + (order.dishPrice * order.dishQuantity);
                }, 0);
            }
        }
    });
</script>
</body>
</html>